Wildform Wildform is the creator of the Flix SWF video encoder and the SWfX SWF text effects generator.
This tutorial was written by FR Elkins.
last modified December 13, 2000
©2000 Wildform, Inc.
<- back to tutorials
Press-and-Hold Scrolling For an External Rich-Text File Using Buttons and Keys in Flash 5
Table of Contents
Introduction
Download the sample .fla

This tutorial is a practical hands-on experience with Flash 5's new syntax in a useful context. It's geared to the new Flash 5 users, and the designer who may find Flash 5 daunting. More experienced users can look at the technique but might want to skim over the bright and cheery explanations.

Although scrolling is a common and relatively simple effect, it's still one of the most asked about on the many Flash listservs. Also, the change of syntax from Flash 4 to Flash 5 can be scary to the designer. Press-and-hold scrolling in the Flash 5 context is a small but useful skill, because it's an easy way to see how the new "dot syntax" works on a practical level. Further, when combined with the new ability of Flash 5 to load an external rich text file, it gives our users (remember them?) the kinds of features they're used to.

The first thing you need to understand is how Flash handles the two important properties SCROLL and MAXSCROLL. If you don't know offhand, don't worry — we'll talk about them a little here. But you might want to skim over them in the Flash 5 manual (Actionscripting Guide, pp. 309 and 356); it will save you some time. Also, review the manual section on Flash 5's new rich-text text box features (Using Flash, p. 219). Again, we'll be talking about them here, but it will be helpful if you remember what HTML tags Flash supports in text boxes and which ones it doesn't. Basically, you get <A>, <B>, <I>, <U>, <P>, and <FONT>, with COLOR and SIZE. You don't get tables, lists, <DIV> or <SPAN>. Finally, we'll also talk about the Key object, the isDown method, and key constants (Actionscripting Guide, pp. 279-288).

Finally, the instructions use the Windows right-click feature; of course on the Mac that becomes a Control+click.
Table of Contents
Drawing and Naming the Text Box
  1. In Flash 5, open a new movie. Set whatever stage size and movie background color you like. Click the Window menu, point to Panel Sets, and choose Default Layout. That way all the panels you need will be available.

  2. Click the Create New Layer icon on the timeline twice to create two new layers. Highlight the layer names and rename them Background, Text, and Scroll Buttons.

  3. Click the Text layer on the Timeline to make it active. Flash 5 adds the keyframe for you when we draw the text box, so you don't need to add one for yourself. It should look like this:



  4. On the Tools panel, click the Text Tool icon and draw a text box on the stage. Make it whatever size you like, but think about the amount the of text you will be putting in the external rich-text file later. Obviously, draw a larger box for more text, a smaller one for less text. It should look something like this:



  5. Since we will be loading our text from an external file, and don't want people to change it, we will set properties for the text box to reflect these priorities. With the text box still active, go to the Character panel and click the Text Options tab. From the drop-down list, choose Dynamic Text. Notice that new options appear on the Text Options tab, and that, if the text box is still active, the square box on the corner of the text field itself changes.

  6. From the new dropdown list that appears, choose Multiline so that the box can hold many lines of text. Also, select the HTML and Word Wrap check boxes. If you want to see a border and colored background for your text box, select Border/Bg. Since we don't want users to be able to select our loaded text, clear the Selectable check box. It should look like this:



  7. In the Variable field, type in whatever you would like your text box to be named. Let's keep it simple and just type Text.

  8. If you'd like the Flash movie to set the font and size of the text in the box, click the Characters tab, and set the font, size, and color that the text will appear. However, one of the great things about loading a rich-text external file is that we can override these settings in the rich-text itself. We'll discuss that on Page 3.

Table of Contents
Creating the Rich-Text File
  1. Take the text you need to present in your movie and paste it into your favorite plain text editor: Notepad, SimpleText, etc. The downloadable .fla has a sample file, but you may use whatever text pleases you. Don't make it too long; Flash can't handle books. The amount of text affects the movie load time, so stick to page or so at most.

  2. At the beginning of your file, before your text begins, we need to tell Flash what text box this text belongs to. We do this by adding the name of the text box, which is what we typed into the Variable field on the Text Options tab of the Character panel. As you remember from Step 2, our box variable is Text. So type Text = at the very start of your file. This tells Flash that this information should be loaded into the text box named Text.

  3. Now let's markup our text using HTML. Remember that we have limited tags: <p>, <b>, <i>, <u>, <a>, <font>, color and size. See the sample file for markup syntax; it's just HTML. Use single quotes around the attributes.
    NB: If you need to create line breaks beyond what <p> does for you try using the hex characters %0d. You can get some space resembling a tab using %09. You can also insert bullet characters in the text file by using the numerical reference appropriate for the font. Check out your favorite character mapping utility for the codes. However, even if you use Courier as the font, it is difficult to approximate tables or hanging lists this way. So experiment, but don't depend on it.

  4. Save the file into the same directory as the Flash movie. Let's name it text.txt or text for those on the Mac.

  5. Now we have to tell our Flash movie to load this file when it loads. Return to Flash and our working movie.

  6. On the Timeline, click the Create New Layer icon to create a new layer. Highlight the Layer 4 name and rename the layer Actions.

  7. Highlighting the Actions layer, double-click the first frame to open the Frame Actions dialog box. Here's where we insert the little bit of script that attaches our text file to our Flash movie. In the Frame Actions box, click the Actions book icon in the left-hand frame. The Actions list opens; scroll down and click the loadVariables action.

  8. The Frame Actions dialog expands to offer new fields. In the URL field, type the name of our text file, text.txt. Since our text box is on the main timeline, or root, of the movie, we can leave the Location set to Level and 0. Since our communication with the text file is only one-way — we are loading the text file and not trying to talk back to it or send anything back to it from the movie — we can leave Variables at Don't Send. Here's what the Frame Action dialog should look like:



  9. Close the Frame Actions dialog and notice the a that has appeared in the keyframe on the Actions layer. That's all we need!
Table of Contents
Adding Buttons
Since we're building on Bill Tagliaferro's press-and-hold scrolling technique, we're going to have the buttons set variables to do our scrolling for us. Let's call the variable down. For our purposes, the user can only move up or down in our movie, and can only do one at a time. We'll make buttons, put them in a movie clip, and then add variables and actions to make the buttons work. And for designers newer to scripting, these techniques teach us to think of everything we want to happen in our movie as states of true or false, existence or non-existence.

  1. Highlight the Scroll Buttons layer on the Timeline. Click the Windows menu, point to Common Libraries, and select Buttons. This opens the default Flash buttons library.

  2. In this example, let's use the gel buttons Fast Forward (with a double arrow) and Left (with a single arrow) from the VCR Buttons folder. Drag one of each onto the stage.

  3. Our text is long enough, so let's have a button for scrolling Up and Down, and jumping directly Home and End. In Step 5, we'll enable keys to correspond: up arrow key, down arrow key, and the Page Up and Page Down keys. Thus we need four buttons, two of each. Let's use the single arrow buttons for Up and Down and the double arrow buttons for Home and End.

  4. Duplicate the buttons by clicking the Edit menu and choosing Duplicate. Then select each button, click the Rotate icon on the Options tool bar and move them by the round handles so one of each points up and down, respectively.

  5. Let's pop these four buttons into their own movie clip. That way we can learn the Flash 5 way to control objects from other timelines. Select the buttons, cut them from the stage (Edit, Cut), and create a new movie clip (Insert, New Symbol). In the Symbol Properties dialog, leave the movie clip radio button selected and type in a name for the movie clip. Let's use scrollbuttons.

  6. Paste (Edit, Paste) the four buttons into the scrollbuttons movie clip. Position them attractively. You can use the Align panel (Window, Panels, Align) to help.

  7. Once your buttons are positioned, we're going to make them into their own movie clips. Select each one in turn and convert them to movie clips (Insert, Convert to to Symbol or press F8). Name the clips Up, Down, Home, and End.

  8. Now we have to add the actions that make them work. Let's start with the Down button clip. Right-click on it, select Edit in Place, right-click on the button itself, and choose Actions from the menu. The Object Actions dialog box opens; it looks exactly like the Frame Actions did.

  9. CClick Basic Actions to open the list and select onMouseEvent. Again the dialog expands to offer more options. Select the Press check box. Notice the code Flash writes in the window.

  10. Without closing the dialog box, click Actions to open the list and select set variable. Again the dialog expands to offer more options. In Variable, type down; in Value, type true. This sets the value of down to be true "on" and means that whenever a user is pressing the Up button, the movie scrolls up. Choose onMouseEvent again, check Release, ReleaseOutside and set variable one more time. In Variable, type down; in Value, type false. This ends scrolling when the user releases the mouse.

  11. Now let's add the actions to the movie clip that check the state of down and tell the movie what to do. Click the Down movie clip underlined above the timeline to return to the Up clip. Right-click on the Up clip and choose Actions. The Object Actions dialog box opens;click the arrow in the upper right-hand corner to choose Expert Mode. This lets us type directly in the window, which for this section of code is easier than choosing from the list. Type:
    onClipEvent (enterFrame) {
if (down) {
	if (_root.text.scroll<_root.text.maxscroll) {
		_root.text.scroll = _root.text.scroll+1;
		}
	}	
}
    In Flash 5, single frame movie clips loop. The OnClipEvent (enter Frame) tells the clip to check whether down is true every time it plays. That is, it checks to see if the user is clicking the Down button. If so, Flash goes off to find the Text variable. Notice how we tell Flash where that variable is. Remember, Text inhabits the main timeline, or root, of the movie, while our buttons dwell in nested movie clips on their own timelines.
    Once Flash has found Text, it then checks to see if it's at the beginning of the last set of lines that fits into the text box (the maxscroll). Flash sets the maxscroll based on the length of the text file and the size of the text box. We can't change it. We could have flash tells us the number of the maxscroll, but for our purposes here we don't care about the exact figure. As long as we haven't reached it, we want to keep going down. So Flash checks to make sure the current line number is less than the maxscroll, and if so, it scrolls down one more line using Text's scroll property.

  12. Let's do the Up button. So repeat Steps 8 through 11. However, because we're going up not down the OnClipEvent code is a little different:

    onClipEvent (enterFrame) {
if (down) {
	if (_root.text.scroll<=_root.text.maxscroll) {
		_root.text.scroll = _root.text.scroll-1;
		}
	}	
}
    You probably got the idea by now.

  13. Let's move on to the Home button. Like the other buttons, Home uses the scroll property; that is, we want Flash to scroll to the first line of the text box when it's pressed. However, we won't use the same tactic with the down variable here.
    Why not? Because testing shows you can easily work yourself into a situation with this method where both Page Up and Page Down can be true since we are setting the scroll to a certain number. Also, there are circumstances where even after a user releases the Up or Down, the movie can still think they are true, which makes it hard to go Home! We'll work around this now.
    So experience shows we should clear down when going Home. (An interesting experiment if you have 30 minutes is to apply the previous techniques to Home and End to see how the problems arise. Look at the variables in the Output window when you test the movie. But you may not have the time.) Instead, we'll just put some code on the Home button itself inside the Home movie clip:

    on (press) {
	
	down = false;
	_root.text.scroll = "1";
	
}


  14. Let's finish up with End. Similar to Home, but:

    on (press) {
	
	down = false;
	_root.text.scroll = _root.text.maxscroll;
		
}
    We don't know precisely what line number is the maxscroll, and again, it doesn't matter. Flash figures it out for us.
Table of Contents
Adding the Key Script
Amazing how we're almost done! All we have to do is add the script that enables users to use the up arrow, down arrow, Page Up and Page Down Keys.

  1. Right-click on scrollbuttons and choose Actions from the menu. The familiar Object Actions dialog appears.

  2. Click on the arrow in the upper-right hand corner of the frame to open the menu. Select Expert Mode. This lets us type directly into the right-hand frame. Type, or copy and paste from here:
    onClipEvent (enterFrame) {
	
	if (Key.isDown(Key.UP) == true) {
		if (_root.about.scroll<=_root.about.maxscroll) {
			_root.about.scroll = _root.about.scroll-1;
		}
	} else if (Key.isDown(Key.DOWN) == true) {
		if (_root.about.scroll<_root.about.maxscroll) {
			_root.about.scroll = _root.about.scroll+1;
		}
	} else if (Key.isDown(Key.PGUP) == true) {
		_root.about.scroll = 1;
	} else if (Key.isDown(Key.PGDN) == true) {
		_root.about.scroll = _root.about.maxscroll;
	}
	endif;
}
    Not only do we deal with the familiar scroll and maxscroll, we also introduce the Key object and its isDown method. The isDown looks to see if it's true that the user is pressing a certain key. What certain key? The Key.UP and Key.DOWN are the Flash 5 ways of referencing the keys. Key tells Flash what object — a key — to look for; the .Down tells it which particular key. From your review of the Flash manual, you remember that Key.UP and Key.DOWN are constants; that is, they are always going to mean the up and down arrow keys; we can't make them mean anything else. So as long as the user holds the up arrow key, Key.isDown(Key.Up) will be true, and so the movie scrolls.

Great! Now it works! Of course, one of the interesting things about scripting is that there are many ways to approach and solve problems. Some are shorter, more elegant, and more efficient than others. Almost all scripts can be improved and tightened. So you may find your own way to perform this task, or a better way. If so, write it up, and help out the Flash community! Don't forget to have fun doing it, too.
Table of Contents
<- back to tutorials
©2000 Wildform, Inc.